<nz-spin [nzSpinning]="isSpinning" id="edit-dom">
  <section class="dashboard_container">
    <p class="dashboard_container-title">Edit Article<span>编辑文章</span></p>

    <!--图形区域-->
    <div class="graphic_container">
      <div class="graphic_btn-container">
        <button class="graphic_back_btn" nz-button nzType="primary" [routerLink]="['/back/dashboard/article']" [queryParams]="{id:0}">返回上一页</button>
        <button class="graphic_new_btn" nz-button nzType="primary" (click)="newAriticleFunc()">新增文章</button>
      </div>

      <div class="graphic_edit_ariticle-container">
        <form nz-form [formGroup]="validateForm" class="edit-form">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">文章标题</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="title" placeholder="请输入文章标题" id="title">
              <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').errors">请输入文章标题!</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">日期</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-date-picker formControlName="date" id="date" [(ngModel)]="date" (ngModelChange)="changeDate($event)" nzShowTime></nz-date-picker>
              <nz-form-explain *ngIf="validateForm.get('date').dirty && validateForm.get('date').errors">请输入文章编辑日期!</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="show_img">文章展示图片</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <!--<nz-upload-->
                <!--nzAction="">-->
                <!--<button nz-button>-->
                  <!--<i class="anticon anticon-upload"></i><span>上传图片</span>-->
                <!--</button>-->
              <!--</nz-upload>-->
              <input formControlName="show_img" class="img-upload" id="show_img"  type="file"
                     accept="image/jpeg,image/png"
                     name="imgfile"
                     multiple (change)="imgChange()" style="display: none">
              <img class="upload_finish_img" src="{{sendData.img}}" alt="">
              <button nz-button nzType="primary" (click)="uploadImg()">上传图片</button>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>文章介绍</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <textarea formControlName="introduce" nz-input rows="2" placeholder="请输入文章文章介绍"></textarea>
              <nz-form-explain *ngIf="validateForm.get('introduce').dirty&&validateForm.get('introduce').hasError('required')">请输入文章文章介绍!</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="details">文章详情</nz-form-label>
            <nz-form-control [nzSm]="18" [nzXs]="18">
              <!--wangeditor编辑器-->
              <div id="editorElem"></div>
              <!--<input nz-input formControlName="details" id="details">-->
              <!--<nz-form-explain *ngIf="validateForm.get('details').dirty && validateForm.get('details').errors">请输入文章详情!</nz-form-explain>-->
            </nz-form-control>
          </nz-form-item>
          <nz-form-item nz-row style="margin-bottom:8px;">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
              <button nz-button nzType="primary" (click)="submitForm()">提交</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
    </div>
  </section>
</nz-spin>
